<template>
  <div>
    <GenTableSearch @getTableList="getTableList" @handleGenTable="handleGenTable"/>

    <el-table
      :data="genTableState.tableList"
      style="width: 100%">
      <el-table-column type="selection" align="center" width="55"></el-table-column>
      <el-table-column prop="tableName" label="表名称"></el-table-column>
      <el-table-column prop="tableComment" label="表描述"></el-table-column>
      <el-table-column prop="className" label="实体类名称"></el-table-column>
      <el-table-column prop="tplCategory" label="使用的模板"></el-table-column>
      <el-table-column prop="packageName" label="生成包路径"></el-table-column>
      <el-table-column prop="moduleName" label="生成模块名"></el-table-column>
      <el-table-column prop="businessName" label="生成业务名"></el-table-column>
      <el-table-column prop="functionName" label="生成功能名"></el-table-column>
      <el-table-column prop="functionAuthor" label="生成功能作者"></el-table-column>
      <el-table-column prop="genPath" label="生成路径"></el-table-column>
      <el-table-column label="操作" fixed="right" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            icon="el-icon-view"
            @click="handlePreview(scope.row)"
          >预览</el-button>
          <el-button
            type="text"
            size="small"
            icon="el-icon-edit"
            @click="handleEditTable(scope.row)"
          >编辑</el-button>
          <el-button
            type="text"
            size="small"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除</el-button>
          <el-button
            type="text"
            size="small"
            icon="el-icon-refresh"
            @click="handleSynchDb(scope.row)"
          >同步</el-button>
          <el-button
            type="text"
            size="small"
            icon="el-icon-download"
            @click="handleGenTable(scope.row)"
          >生成代码</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 预览界面 -->
    <el-dialog :title="preview.title" :visible.sync="preview.open" width="80%" top="5vh" append-to-body>
      <el-tabs v-model="preview.activeName">
        <el-tab-pane
          v-for="(value, key) in preview.data"
          :label="key.substring(key.lastIndexOf('/')+1,key.indexOf('.ftl'))"
          :name="key.substring(key.lastIndexOf('/')+1,key.indexOf('.ftl'))"
          :key="key"
        >
          <pre><code class="hljs" v-html="highlightedCode(value, key)"></code></pre>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>

    <ImportTable />
  </div>
</template>

<script>
  import GenTableEdit from "./components/GenTableEdit";
  import GenTableSearch from "./components/GenTableSearch";
  import ImportTable from "./components/ImportTable";
  import { mapState } from "vuex";
  import hljs from "highlight.js/lib/highlight";
  import "highlight.js/styles/github-gist.css";
  hljs.registerLanguage("java", require("highlight.js/lib/languages/java"));
  hljs.registerLanguage("xml", require("highlight.js/lib/languages/xml"));
  hljs.registerLanguage("html", require("highlight.js/lib/languages/xml"));
  hljs.registerLanguage("vue", require("highlight.js/lib/languages/xml"));
  hljs.registerLanguage("javascript", require("highlight.js/lib/languages/javascript"));
  hljs.registerLanguage("sql", require("highlight.js/lib/languages/sql"));

  export default {
    name: "index",
    data(){
      return{
        // 选中数组
        ids: [],
        // 选中表数组
        tableNames: [],
        // 预览参数
        preview: {
          open: false,
          title: "代码预览",
          data: {},
          activeName: "entity.java"
        }
      }
    },
    computed:{
      ...mapState({
        rootState: state=>state,
        genTableState: state=>state.GenTable
      })
    },
    components: {
      GenTableEdit, GenTableSearch, ImportTable
    },
    created(){ this.getTableList(); },
    methods: {
      getTableList(current) {
        if (current) this.rootState.current = current;
        this.api.post("/genTable/getList?current=" + this.rootState.current + "&size=" + this.rootState.size, this.genTableState.searchForm).then((res) => {
          if (res.code === 200) {
            this.genTableState.tableList = res.data.records;
            this.rootState.total = res.data.total;
            this.$store.dispatch("ROOT_UPDATE_TABLE_HEIGHT", {$}); // 动态设置表格高度
          }
        });
      },
      /** 预览按钮 */
      handlePreview(row) {
        this.api.get("/genTable/preview/"+row.id).then((res) => {
          this.preview.data = res.data;
          this.preview.open = true;
        });
      },
      /** 高亮显示 */
      highlightedCode(code, key) {
        const vmName = key.substring(key.lastIndexOf("/") + 1, key.indexOf(".ftl"));
        var language = vmName.substring(vmName.indexOf(".") + 1, vmName.length);
        const result = hljs.highlight(language, code || "", true);
        return result.value || '&nbsp;';
      },
      handleGenTable(row) {
        const tableNames = row.tableName || this.tableNames;
        if (tableNames === "") {
          this.$message.error("请选择要生成的数据");
          return;
        }
        if(row.genType === "1") {
          this.api.get("/genTable/genCode?tableNames="+tableNames).then((res) => {
            this.$message.success("成功生成到自定义路径：" + row.genPath);
          });
        } else {
          downLoadZip("/tool/gen/batchGenCode?tables=" + tableNames, "ruoyi");
        }
      },
      handleEditTable(row){
        const tableId = row.id || this.ids[0];
        this.$router.push({
          path: "/manage/genTable/edit",
          query:{
            tableId: tableId
          }
        });
      }
    }
  }

</script>

<style scoped>

</style>
